﻿<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <script>
	var source;
        window.addEventListener('message', messageHandler);
        function messageHandler(e) {
            if (e.data == 'pause') {
                document.getElementsByTagName('video')[0].pause();

            } else if (e.data == 'play') {
                document.getElementsByTagName('video')[0].play();

            } else {
                document.getElementById('sourceData').innerHTML = e.data;
            }
            document.getElementById('sendBack').style.display = "";
            source = e.source;
        }
        function sendItBack() {
            source.postMessage('Back: ' + document.getElementById('sourceData').innerHTML, '*');
        }
    </script>

</head>
<body>
    <section>
<span id="sourceData"></span>
<br>
<input id="sendBack" type="submit" value="Send back" onclick="sendItBack()" style="display:none;"/>
</section>
    <section> 
<h3>Video</h3>
<video width="300" height="200" autoplay loop controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</section>
  
</body>
</html>
